<template>
    <div class="login-box">
        <div class="login-spinner">
            <div class="cube1"></div>
            <div class="cube2"></div>
        </div>
        <span class="text">正在加载，请稍候 ......</span>
    </div>
</template>

<script>
import { getLocationParams } from '@/utils/handlePath'
import { getUserInfo } from '@/api/user'
import router from '@/router';
export default {
    data() {
        return {
            query: {
                type: '1',
                userName: ''
            }
        }
    },
    created() {
        this.handleLogin();
    },
    methods: {
        handleLogin() {
            if (getLocationParams("flag") != 1) {
                console.log('跳转登录页');
                return;
            }
            this.query.userName = getLocationParams('userId');
            getUserInfo(this.query).then(res => {
                this.$store.dispatch('user/setUserInfo', res);
                this.$store.dispatch('user/setToken', res.token);
                router.push('/home');
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.login-box {
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-spinner {
    position: absolute;
    top: calc(50% - 100px);
    left: 50%;
}

.login-box span {
    display: inline-block;
    position: absolute;
    font-size: 18px;
    top: calc(50% + 80px);
    left: 50%;
    margin-left: -30px;
}

.cube1,
.cube2 {
    background-color: #67cf22;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: cubemove 2.2s infinite ease-in-out;
    animation: cubemove 2.2s infinite ease-in-out;
}

.cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}
</style>